@import "./base.less";

.@{css-prefix}.tabs {
  font-size: @base-font-size;
  background: #ffffff;

  &.-card {
    .border;
    .box-shadow;

    .nav {
      background: @hover-background-color;
      margin: 0;

      li {
        &:first-child {
          margin-left: -1px;
        }
      }

      &.top li {
        margin-top: -1px;
      }

      &.bottom li {
        margin-bottom: -1px;
      }
    }
  }

  .nav {
    padding: 0;
    margin: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    list-style: none;

    li {
      .padding;
      cursor: pointer;
      border: 1px solid transparent;

      &.active {
        .border;
        color: @active-color;
        background: #fff;
        font-weight: bold;
      }

      &:hover {
        color: @active-color;
      }
    }

    &.top {
      border-bottom: @border-style;
      li {
        margin-bottom: -1px;
        &.active {
          border-bottom-color: #fff;
        }
      }
    }
    &.bottom {
      border-top: @border-style;
      li {
        margin-top: -1px;
        &.active {
          border-top-color: #fff;
        }
      }
    }
  }
}
